<template>
    <div class="box">
        <van-sticky>
        <header>
    <span> <img @click="goBack" class="Back"  src="../../../assets/icon/hdpi/fh.png" alt=""></span>
     <span class="purse1">历史问诊</span>
     <router-link to="accept">
        <span class="purse2">收到的礼物</span>
     </router-link>
        </header>
        </van-sticky>
        <main>
            <div class="list_box">
                <div class="li_box" v-for="(item,index) in list as Array<{
    id(id: any): unknown; image:string,name:string,times:string 
}>" :key="index">
                    <div style="display: flex;">
                        <div class="li_left">
                            <div @click="infor(item.id)">
                                <img  :src="item.image" alt="">
                            </div>
                        </div>
                        <div class="li_right">
                            <div>
                                <p>
                                    <span>问诊人</span> <span>{{ item.name }}</span>
                                </p>
                            </div>
                            <div>
                                <p>
                                    <span>问诊时间</span> <span>{{ item.times }}</span>
                                </p>
                            </div>
                            <div>
                                 <button @click="lookhistory(item.id)">查看问诊记录</button>
                                
                               
                                 <button @click="look">查看评价</button>
                                
                                 
                            </div>
                        </div>
                    </div>
                    
                    
                </div>
                <!-- <van-empty description="暂无问诊">
                    <van-button round type="primary" class="bottom-button">返回</van-button>
                </van-empty> -->
            </div>
        </main>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
const router = useRouter();
import {DoctorPl} from '../../../request/api'
import {ref} from 'vue'

const list=ref([])

const goBack = () => {
  router.push('/manage');
};

DoctorPl().then((res)=>
{
    // console.log(res);
    
    list.value=res.data.data
})



const lookhistory=(id?: (
    /// <reference types="vue/dist/__globalTypes_3.4_false.d.ts" />
    id: any) => unknown)=>
{
    router.push('/record/'+id);
}

const look=()=>
{
    router.push('/appraise');
}


const infor = (id?: (
    /// <reference types="vue/dist/__globalTypes_3.4_false.d.ts" />
    id: any) => unknown) => {
  router.push(`/mylist/`+id);
};

</script>

<style scoped>
.box
{
    width: 100%;
    height: 100vh;
}

header
{
    width: 99vw;
    height: 50px;
    background: #fff;
    z-index: 999;
}
.Back
{
    width: 25px;
    height: 25px;
    margin-left: 20px;
    margin-top: 10px;
}
.purse1{
    font-size: 18px;
    margin-left: 118px;
}
.purse2{
    font-size: 12px;
    position: absolute;
    top: 38px;
    margin-left: 50px;
}

main
{
    width: 100%;
    height: 80%;
}

 .bottom-button {
    width: 160px;
    height: 40px;
  }

  .list_box
  {
    width: 100%;
    height: 100%;
  }

  .li_box
  {
     width: 100%;
     height: 120px;
     display: flex;
     border: 1px solid #ccc;
     border-radius: 10px;
     margin-top: 20px;
     margin-left: 30px;
     align-items: center;
  }

  .li_left
  {
     width: 20%;
     height: 100%;
     align-items: center;
     margin-left: 10%;
  }

  .li_left img
  {
      width: 100%;
      height: 100%;
      border-radius: 50%;
  }

  .li_right
  {
     width: 70%;
     height: 100%;
     margin-left: 30px;
     align-items: center;
  }

  .li_right button
  {
    width: 74px;
    height: 30px;
     border: none;
     background: #3087EA;
     color: #fff;
     border-radius: 5px;
     font-size: 10px;
     margin-right: 15px;
  }
</style>